<template>
	<view>
		<view class="">
			<view class="my-top-box">
				<image class="wh-100" src="../../../static/icon/myIcon/my-top-bj.png" mode=""></image>
				<view class="my-top-box-1 flex-js-as-fc">
					<view class="my-top-user-box flex-ac">
						<image src="../../../static/19.png" mode=""></image>
						<text class="text-24-ffffff">她夏了夏天</text>
						<u-icon class="my-top-sz-icon" name="setting-fill" color="#FFFFFF" size="34"></u-icon>
					</view>
					<view class="my-top-content-box">
						<view class="my-top-content-text-box flex-as-fc">
							<view class="">
								<text class="text-72-f3f2f0-b">400</text>
								<text class="text-24-ffffff-b" style="margin-left: 10rpx;">元</text>
							</view>
							<text class="text-24-f3f2f0">可提现</text>
						</view>
						<view class="my-top-bottom-box flex-as-fc">
							<view class="td-box">
								<text class="text-24-ffffff-b">我的团队</text>
								<u-icon name="arrow-right" color="#FFFFFF"></u-icon>
							</view>
							<view class="" style="margin-top: 20rpx;">
								<text class="text-20-808080">今日邀请1人注册好友</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="my-center-box">
					<view class="my-center-item-box flex-jc-ac-fc" v-for="(columnItem,index) in myColumnList" :key="index"
					@click="navgitToPage(columnItem)">
						<image :src="columnItem.iconImg" mode=""></image>						
						<text class="text-24-0f0f0f-b">{{columnItem.columnName}}</text>
					</view>
				</view>
			</view>
			<view class="my-bottom-box mg-lr-25" v-for="(myListItem,index) in 6" :key="index">
				<image src="../../../static/19.png" mode=""></image>
				<view class="my-bottom-text-box wh-100 flex-jc-as-fc">
					<text class="text-36-ffffff-b">人气新品</text>
					<text class="text-24-ffffff">更多活动等你来体验</text>
				</view>
			</view>
			<view class="" style="height: 30rpx;">
				
			</view>
			
		<!-- 	<view class="" style="position: relative;height: 100rpx;width: 100rpx;background-color: #007AFF;">
				<u-badge size="mini" type="success"></u-badge>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myColumnList:[
					{
						iconImg:require("../../../static/icon/myIcon/1.png"),
						columnName:"我的收藏",
						pagePath:"/pages/my/collect/collect"
					},{
						iconImg:require("../../../static/icon/myIcon/2.png"),
						columnName:"优惠卡券",
						pagePath:"/pages/my/collect/collect"
					},{
						iconImg:require("../../../static/icon/myIcon/3.png"),
						columnName:"我的钱包",
						pagePath:"/pages/my/money/money"
					},{
						iconImg:require("../../../static/icon/myIcon/4.png"),
						columnName:"我的积分",
						pagePath:"/pages/my/collect/collect"
					},{
						iconImg:require("../../../static/icon/myIcon/5.png"),
						columnName:"我的团队",
						pagePath:"/pages/my/collect/collect"
					},{
						iconImg:require("../../../static/icon/myIcon/6.png"),
						columnName:"浏览历史",
						pagePath:"/pages/my/collect/collect"
					},{
						iconImg:require("../../../static/icon/myIcon/7.png"),
						columnName:"邀请好友",
						pagePath:"/pages/my/collect/collect"
					},{
						iconImg:require("../../../static/icon/myIcon/8.png"),
						columnName:"意见反馈",
						pagePath:"/pages/my/collect/collect"
					}
				]
			}
		},
		methods: {
			navgitToPage(e){
				let path = e.pagePath;
				uni.navigateTo({
					url:path+"?pageName="+e.columnName
				})
			}
		}
	}
</script>

<style scoped>
	.my-top-box{
		height: 600rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		background-color: #000000;
		border-radius: 20rpx;
		position: relative;
	}
	.my-top-box > image:nth-of-type(1){
		position: absolute;
		left: 0;
		top: 0;
		/* z-index: -1; */
	}
	.my-top-box-1{
		margin-left: 50rpx;
	}
	.my-top-user-box{
		width: 100%;
		position: relative;
	}
	.my-top-user-box >image:nth-of-type(1){
		height: 84rpx;
		width: 84rpx;
		border-radius: 50%;
		margin-top: 70rpx;
	}
	.my-top-content-box{
		z-index: 1;
		height: 100%;
	}
	.my-top-content-text-box{
		margin-top: 40rpx;
	}
	.my-top-content-text-box >text:nth-of-type(2){
		opacity: 0.5;
		margin-top: 14rpx;
	}
	.my-top-bottom-box{
		margin-top: 150rpx;
		
	}
	.td-box > :nth-child(1){
		margin-right: 10rpx;
		margin-bottom: 30rpx;
	}
	.my-top-sz-icon{
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	.my-top-user-box >text{
		margin-top: 70rpx;
		margin-right: 50rpx;
		margin-left: 30rpx;
	}
	
	.my-center-box{
		display: grid;
		grid-template-columns: repeat(4,1fr);
		grid-template-rows: repeat(2,1fr);
		row-gap: 70rpx;
		margin-bottom: 78rpx;
		margin-top: 70rpx;
	}
	.my-center-item-box{
		
	}
	.my-center-item-box >image{
		height: 80rpx;
		width: 80rpx;
	}
	.my-center-item-box >text{
		margin-top: 28rpx;
	}
	
	.my-bottom-box{
		height: 300rpx;
		position: relative;
		margin-top: 20rpx;
	}
	.my-bottom-box >image{
		height: 100%;
		width: 100%;
	}
	.my-bottom-text-box{
		position: absolute;
		top: 0;
		left: 0;
	}
	.my-bottom-text-box >text{
		margin-left: 45rpx;
	}
	.my-bottom-text-box >text:nth-of-type(2){
		margin-top: 42rpx;
	}

</style>
